<template>
	<!--底部分享弹窗-->
	<tui-bottom-popup :show="popupShow" @close="popupSwitch">
		<view class="tui-share">
			<view class="tui-share-title">分享到</view>
			<scroll-view  class="tui-mt">
				<view class="tui-share-bottom">
					<view  class="tui-share-item" @tap="popup">
						<button open-type="share" class="btn-feedback">
							<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150">
								<tui-icon name="wechat" color="#80D640" :size="36"></tui-icon>
							</view>
							<view class="tui-share-text">微信好友</view>
						</button>
					</view>
					<view @tap="toShare" class="tui-share-item">
						<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150">
							<tui-icon name="moments" color="#80D640"  :size="36"></tui-icon>
						</view>
						<view class="tui-share-text">生成海报</view>
					</view>
					<!-- <view class="tui-share-item"  @tap="this.tui.copy('513703897@qq.com')">
						<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150">
							<tui-icon name="link" color="#80D640"  :size="36"></tui-icon>
						</view>
						<view class="tui-share-text">复制链接</view>
					</view> -->
				</view>
			</scroll-view>
			<view class="tui-btn-cancle" @tap="popupSwitch">取消</view>
		</view>
	</tui-bottom-popup>
	<!--底部分享弹窗-->
</template>

<script>
	import tuiIcon from '@/components/icon/icon';
	import tuiBottomPopup from "@/components/bottom-popup/bottom-popup"
	export default {
		name: "weiShare",
		components: {
			tuiBottomPopup,
			tuiIcon
		},
		props: {
/* 			//是否可见
			popupShow: {
				type: Boolean,
				default: false
			}, */
			//当前页面背景颜色
/* 			createPosterPage: {
				type: String,
				default: "../act/act-poster?actId"
			} */
		},
		data() {
			return {
				popupShow: false
			};
		},
		methods:{
			popupSwitch: function() {
				this.popupShow = !this.popupShow
			},
			toShare() {
				this.popupSwitch();
				// 通知父组件方法
				this.$emit("posterHandle");
			}
		}
	}
</script>

<style scoped>
/* 底部弹框样式 */
	.tui-share {
		background: #e8e8e8;
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-share-title {
		font-size: 26upx;
		color: #7E7E7E;
		text-align: center;
		line-height: 26upx;
		padding: 20upx 0 50upx 0;
	}

	.tui-share-top,
	.tui-share-bottom {
		min-width: 101%;
		padding: 0 20upx 0 30upx;
		white-space: nowrap;
	}

	.tui-mt {
		margin-top: 30upx;
		padding-bottom: 150upx;
	}

	.tui-share-item {
		width: 126upx;
		display: inline-block;
		margin-right: 24upx;
		text-align: center;
	}

	.tui-item-last {
		margin: 0;
	}

	.tui-empty {
		display: inline-block;
		width: 30upx;
		visibility: hidden;
	}

	.tui-share-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fafafa;
		height: 126upx;
		width: 126upx;
		border-radius: 32upx;
	}

	.tui-share-text {
		font-size: 24upx;
		color: #7E7E7E;
		line-height: 24upx;
		padding: 20upx 0;
		white-space: nowrap;
	}

	.tui-btn-cancle {
		width: 100%;
		height: 100upx;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #f6f6f6;
		font-size: 36upx;
		color: #3e3e3e;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-hover {
		background: rgba(0, 0, 0, 0.2)
	}
	.btn-feedback {
		background: transparent !important;
		position: absolute;
		/* height: 100%; */
		/* width: 100%; */
		left: 0;
		top: 0;
	}
</style>
